import { Button, Image, List, Space, Toast } from "antd-mobile";
import { isValidArr, navigateTo } from "@/utils";
import { useEffect, useState } from "react";
import { useRouter } from "next/router";
import requewt from "@/utils/requewt";
import { API } from "@/config";
import callFeedback from "@/components/common/modalFeedback";
import { ListComp, ListMineComp, StageComp } from "@/components/pages/rank";

export default function () {
  const router = useRouter();

  const [type, setType] = useState(undefined);
  const [loading, setLoading] = useState(undefined);
  const [data, setData] = useState(undefined);
  const [self, setSelf] = useState(undefined);

  useEffect(() => {
    (async () => {
      await handler.fetch();
    })()
  }, [])

  const handler = {
    fetch: async () => {
      Toast.show({icon: 'loading', content: '加载中'})

      const resp = await requewt(API.rank.mine)
      Toast.clear()
      if (resp?.error_code !== 0 || resp?.msg !== `ok`) {
        callFeedback({
          title: <div dangerouslySetInnerHTML={{__html: resp?.msg || `失败!`}}>
          </div>
        })
        return
      }

      setData(resp?.data);
    },
    lottery: async () => {
      await navigateTo(`/wheel`)
    },
    portal: async () => {
      await navigateTo(`/portal`)
    },
    back: async () => {
      router.back()
    }
  }

  return (
    <>
      <h2 className="header">
        个人记录
      </h2>

      <ListMineComp data={data} self={self} />
    </>
  )
}